﻿{% extends 'rango/base.html' %}
{% load static %}

{% block custom_css %}
<link href="{% static 'css/custom/mycv.css' %}" rel="stylesheet">
{% endblock %}
{% block body_block %}
<div class="container-fluid">
  <table class="table table-bordered">
    <colgroup>
      <col width="19%"/>
      <col width="38%"/>
      <col width="19%"/>
      <col width="24%"/>
    </colgroup>
    <tr>
      <td rowspan="4"><img style="width:100%; height:auto;" class="img-circle" src="http://dummyimage.com/150x150/000/fff"/></td>
    </tr>
    <tr>
      <td colspan="3">
        <div class="span10">
          <h3 style="font-family:verdana">Phùng Thế Đạt</h3>
          <h6 style="margin-top:-15px;font-family:verdana;">Software programmer</h6>
        </div>
         <div class="span2 pull-right">
          <h3><a id="hire_me" href="#" class="btn btn-success">Hire me!</a></h3>
         </div>
      </td>
    </tr>
    <tr>
      <td><img src="{% static 'img/graduate.png' %}" alt="University" height="20" width="20"/>&nbsp;&nbsp;Graduated at <strong style="display:inline; color:#FFA500;">University of IT </strong></td>
      <td><img src="{% static 'img/birthday.png' %}" alt="Age" height="20" width="20"/>&nbsp;&nbsp;26 Years old</td>
      <td><img src="{% static 'img/avail.png' %}" alt="Available" height="20" width="20"/>&nbsp;&nbsp;<label style="color:green;display:inline;">AVAILABLE</label>&nbsp;- Full time</td>
    </tr>
    <tr>
      <td><img src="{% static 'img/location.png' %}" alt="Location" height="20" width="20"/>&nbsp;&nbsp; Ho Chi Minh city - Vietnam</td>
      <td><img src="{% static 'img/gender.png' %}" alt="Gender" height="20" width="20"/>&nbsp;&nbsp;Male</td>
      <td/>
    </tr>
  </table>

  <ul class="nav nav-tabs" style="background:#252525; border-radius:4px;">
    <li class="active"><a data-toggle="tab" href="#timeline">TIMELINE</a></li>
    <li><a data-toggle="tab" href="#projects">PROJECTS</a></li>
    <li><a data-toggle="tab" href="#textcv"><i class="icon-download"/></i>TEXT CV</a></li>
  </ul>

  <div class="tab-content" style="margin-top:-20px">
    <div id="timeline" class="tab-pane fade in active">
      <div class="bar"></div>
      <div class="timeline">
        {% for point in timePoints %}
        <div class="entry">
          <h2>{{point.title}}</h2>
          <img class="img-rounded" src="{{point.img}}"/>
          <ul style="text-align:left;">
          {% for event in point.events %}
            <li>{{event}}</li>
          {% empty %}
            <li>Information not available</li>
          {% endfor %}
          </ul>
        </div>
        {% endfor %}
      </div>
      <div style="text-align:right; width:100%;color:red;font-size:11px;">(*) Use mouse's scroll wheel to scroll the timeline</div>
      <div style="margin-top:10px;">
        <div class="span5">
          <div>
            <img src="{% static 'img/languages.png' %}" alt="Languages" height="35" width="35">
            <h4  style="display: inline;vertical-align: middle">&nbsp;&nbsp;&nbsp;LANGUAGES</h4>
          </div>
          
          {% for skill in langSkills %}
          <div style="display:block; margin-top:{% if forloop.counter == 1%}10{% else %}20{% endif %}px">
            <h6 style="display: inline; width: 25%">{{skill.title}}</h6>
            <div class="pull-right" style="width: 75%">
              <div class="progress progress-striped active">
                <div class="bar {{skill.css}}" role="progressbar" aria-valuenow="{{skill.percent}}" aria-valuemin="0" aria-valuemax="100" style="width:{{skill.percent}}%">
                  {{skill.desc}}
                </div>
              </div>
            </div>
          </div>
          {% empty %}
          Information not available
          {% endfor %}
          <div style="margin-top:25px">
            <img src="{% static 'img/interest.png' %}" alt="Interests" height="35" width="35">
            <h4  style="display: inline;vertical-align: middle">&nbsp;&nbsp;&nbsp;INTERESTS</h4>
          </div>
          <div>
            <h5>Sports</h5>
            <p style="margin-top:-13px">&nbsp;&nbsp;Love watch and play football</p>
          </div>
          <div style="margin-top:5px">
            <h5>Planting</h5>
            <p style="margin-top:-13px">&nbsp;&nbsp;Love to plant flower, tomato, pepper,...</p>
          </div>
          <div style="margin-top:5px">
            <h5>Travelling</h5>
            <p style="margin-top:-13px">&nbsp;&nbsp;Will save some leave day for travelling</p>
          </div>
          <div style="margin-top:5px">
            <h5>Books and films</h5>
            <p style="margin-top:-13px">&nbsp;&nbsp;Love comic, novel, films, ...</p>
          </div>
        </div>
        <div class="span7 pull-right">
          <div>
            <div>
              <img src="{% static 'img/skill.png' %}" alt="Skills" height="35" width="35">
              <h4  style="display: inline;vertical-align: middle">&nbsp;&nbsp;&nbsp;TOP SKILLS</h4>
            </div>
          </div>
          
          <div class="span6">
            {% for skill in topSkills %}
            <div style="display:block;margin-top:{% if forloop.counter != 1 %}20px{% else %}10px{% endif %};">
              <h6 style="display: inline; width: 37%">{{skill.title}}</h6>
              <div class="pull-right" style="width: 63%">
                <div class="progress progress-striped active">
                  <div class="bar {{skill.css}}" role="progressbar" aria-valuenow="{{skill.percent}}" aria-valuemin="0" aria-valuemax="100" style="width:{{skill.percent}}%">
                    {{skill.desc}}
                  </div>
                </div>
              </div>
            </div>
            {% empty %}
            Information not available
            {% endfor %}
          </div>

          <div class="span6 pull-right" style="margin-left: -1px">
            {% for skill in softSkills %}
            <div style="display:block;margin-top:{% if forloop.counter != 1 %}20px{% else %}10px{% endif %};">
              <h6 style="display: inline; width: 37%">{{skill.title}}</h6>
              <div class="pull-right" style="width: 63%">
                <div class="progress progress-striped active">
                  <div class="bar {{skill.css}}" role="progressbar" aria-valuenow="{{skill.percent}}" aria-valuemin="0" aria-valuemax="100" style="width:{{skill.percent}}%">
                    {{skill.desc}}
                  </div>
                </div>
              </div>
            </div>
            {% empty %}
            Information not available
            {% endfor %}
          </div>
          <div>
            <div class="span12">
              <h4  style="display: inline">&nbsp;&nbsp;&nbsp;Also</h4>
            </div>

            {% if otherSkills %}
            <table class="table table-bordered" style="margin-top:10px; width: 100%;">
              <colgroup>
                <col width="33.3%"/>
                <col width="33.3%"/>
                <col width="33.3%"/>
              </colgroup>
              {% for tr in otherSkills %}
              <tr>
                {% for td in tr %}
                  <td style="text-align:justify;">{{td}}</td>
                {% endfor %}
              </tr>
              {% endfor %}
            </table>
          </div>
          {% else %}
          Information not available
          {% endif %}
        </div>
      </div>
    </div>
    <div id="projects" class="tab-pane fade">
      {% for project in projects%}
      <div>
        <div class="hero-unit" style="margin-top:5px">
          <h1 style="color: red;">{{project.name}}</h1>
          <p>{{project.short_desc}}</p>
        </div>
        <div class="row-fluid">
          <div class="span6">
            <h2> Technology/ Framework </h2>
            <ul>
              {% for tech in project.techs %}
              <li style="font-style: italic;">{{tech}}</li>
              {% empty %}
              <li style="font-style: italic;">Information not available</li>
              {% endfor %}
            </ul>
          </div>
          <div class="span6">
            <h2> Summary </h2>
            <ul>
              {% for sumary in project.sumaries %}
              <li style="font-style: italic;">{{sumary}}</li>
              {% empty %}
              <li style="font-style: italic;">Information not available</li>
              {% endfor %}
            </ul>
          </div>
        </div>
      </div>
      {% empty %}
      {% endfor %}
      <h5 style="color: red;">(*) And some other project that I'm not allowed to talk about</h5>
    </div>
    <div id="textcv" class="tab-pane fade">
      <div class="hero-unit">
        <h1 style="color: red;">Thank you!</h1>
        <p>Click <a id="download" href="#">here</a> to download a hard copy of my CV</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block custom_js %}
<script src="{% static 'js/jquery.mousewheel.min.js' %}"></script>
<script src="{% static 'js/custom/mycv.js' %}"></script>
{% endblock %}